<template>
	<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改' " :close-on-click-modal='false'
		:close-on-press-escape='false' :fullscreen='true'>
		<el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter.native="dataFormSubmitHandle()"
			label-width="120px">
			<el-row>
				<el-col :span="4">
					<el-form-item label="库位编码" prop="location">
						<el-input size="small" v-model="dataForm.location" placeholder="库位编码" :disabled="!!dataForm.id"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="区" prop="zonecode">
						<!-- <el-input v-model="dataForm.zonecode" placeholder="区"></el-input> -->

						<el-select size="small" v-model="dataForm.zonecode">
							<el-option v-for="item in zoneList" :key="item.zonecode" :label="item.zonename"
								:value="item.zonecode">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="排" prop="locRow">
						<el-input size="small" v-model="dataForm.locRow" placeholder="排"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="列" prop="locColumn">
						<el-input size="small" v-model="dataForm.locColumn" placeholder="列"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="4">
					<el-form-item label="层" prop="locLevel">
						<el-input size="small" v-model="dataForm.locLevel" placeholder="层"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="库位类型" prop="locType">
						<!-- <el-input v-model="dataForm.locType" placeholder="库位类型"></el-input> -->
						<el-select size="small" v-model="dataForm.locType">
							<el-option v-for="item in locTypeList" ::key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>

				<el-col :span="4">
					<el-form-item label="库位类别" prop="locCategory">
						<!-- <el-input v-model="dataForm.locCategory" placeholder="库位类别"></el-input> -->
						<el-select size="small" v-model="dataForm.locCategory">
							<el-option v-for="item in locCategoryList" :key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="库位状态" prop="locStatus">
						<!-- <el-input v-model="dataForm.locStatus" placeholder="库位状态"></el-input> -->
						<el-select size="small" v-model="dataForm.locStatus">
							<el-option v-for="item in locStatusList" :key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="4">
					<el-form-item label="巷道" prop="lane">
						<el-input size="small" v-model="dataForm.lane" placeholder="巷道"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="巷道侧边" prop="laneSide">
						<el-input size="small" v-model="dataForm.laneSide" placeholder="巷道侧边"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="巷道侧边的深度" prop="laneDepth">
						<el-input size="small" v-model="dataForm.laneDepth" placeholder="巷道侧边的深度"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="物料是否混放" prop="ismixedsku">
						<!-- <el-input v-model="dataForm.ismixedsku" placeholder="商品是否混放"></el-input> -->
						<el-select size="small" v-model="dataForm.ismixedsku">
							<el-option v-for="item in IsmixedList" :key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="4">
					<el-form-item label="箱是否混放" prop="ismixedtray">
						<el-select size="small" v-model="dataForm.ismixedtray">
							<el-option v-for="item in IsmixedList" :key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="lot1是否混放" prop="ismixedlot1">
						<!-- <el-input v-model="dataForm.ismixedlot1" placeholder="lot1是否混放"></el-input> -->
						<el-select size="small" v-model="dataForm.ismixedlot1">
							<el-option v-for="item in IsmixedList" :key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="lot2是否混放" prop="ismixedlot2">
						<!-- <el-input v-model="dataForm.ismixedlot2" placeholder="lot2是否混放"></el-input> -->
						<el-select size="small" v-model="dataForm.ismixedlot2">
							<el-option v-for="item in IsmixedList" :key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="lot3是否混放" prop="ismixedlot3">
						<!-- <el-input v-model="dataForm.ismixedlot3" placeholder="lot3是否混放"></el-input> -->
						<el-select size="small" v-model="dataForm.ismixedlot3">
							<el-option v-for="item in IsmixedList" :key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="4">
					<el-form-item label="lot4是否混放" prop="ismixedlot4">
						<!-- <el-input v-model="dataForm.ismixedlot4" placeholder="lot4是否混放"></el-input> -->
						<el-select size="small" v-model="dataForm.ismixedlot4">
							<el-option v-for="item in IsmixedList" :key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="4">
					<el-form-item label="lot5是否混放" prop="ismixedlot5">
						<!-- <el-input v-model="dataForm.ismixedlot5" placeholder="lot5是否混放"></el-input> -->
						<el-select  size="small" v-model="dataForm.ismixedlot5">
							<el-option v-for="item in IsmixedList" :key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>

				<el-col :span="4">
					<el-form-item label="lot6是否混放" prop="ismixedlot6">
						<!-- <el-input v-model="dataForm.ismixedlot6" placeholder="lot6是否混放"></el-input> -->
						<el-select size="small" v-model="dataForm.ismixedlot6">
							<el-option v-for="item in IsmixedList" :key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="lot7是否混放" prop="ismixedlot7">
						<!-- <el-input v-model="dataForm.ismixedlot7" placeholder="lot7是否混放"></el-input> -->
						<el-select size="small" v-model="dataForm.ismixedlot7">
							<el-option v-for="item in IsmixedList" :key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="4">
					<el-form-item label="lot8是否混放" prop="ismixedlot8">
						<!-- <el-input v-model="dataForm.ismixedlot8" placeholder="lot8是否混放"></el-input> -->
						<el-select size="small" v-model="dataForm.ismixedlot8">
							<el-option v-for="item in IsmixedList" :key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="4">
					<el-form-item label="lot9是否混放" prop="ismixedlot9">
						<!-- <el-input v-model="dataForm.ismixedlot9" placeholder="lot9是否混放"></el-input> -->
						<el-select size="small" v-model="dataForm.ismixedlot9">
							<el-option v-for="item in IsmixedList" :key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="lot10是否混放" prop="ismixedlot10">
						<!-- <el-input v-model="dataForm.ismixedlot10" placeholder="lot10是否混放"></el-input> -->
						<el-select size="small" v-model="dataForm.ismixedlot10">
							<el-option v-for="item in IsmixedList" :key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="lot11是否混放" prop="ismixedlot11">
						<el-select size="small" v-model="dataForm.ismixedlot11">
							<el-option v-for="item in IsmixedList" :key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="4">
					<el-form-item label="lot12是否混放" prop="ismixedlot12">
						<el-select size="small" v-model="dataForm.ismixedlot12">
							<el-option v-for="item in IsmixedList" :key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="lot13是否混放" prop="ismixedlot13">
						<el-select size="small" v-model="dataForm.ismixedlot13">
							<el-option v-for="item in IsmixedList" :key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="lot14是否混放" prop="ismixedlot14">
						<el-select size="small" v-model="dataForm.ismixedlot14">
							<el-option v-for="item in IsmixedList" :key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="lot15是否混放" prop="ismixedlot15">
						<el-select size="small" v-model="dataForm.ismixedlot15">
							<el-option v-for="item in IsmixedList" :key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="仓库" prop="warehouse">
						<el-input size="small" v-model="dataForm.warehouse" placeholder="仓库"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="4">
					<el-form-item label="长" prop="length">
						<el-input size="small" v-model="dataForm.length" placeholder="长"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="4">
					<el-form-item label="宽" prop="width">
						<el-input size="small" v-model="dataForm.width" placeholder="宽"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="高" prop="height">
						<el-input size="small" v-model="dataForm.height" placeholder="高"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="重量" prop="weight">
						<el-input size="small" v-model="dataForm.weight" placeholder="重量"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="是否创建任务" prop="iscreate">
						<!-- <el-input v-model="dataForm.iscreate" placeholder="是否创建任务"></el-input> -->
						<el-select size="small" v-model="dataForm.iscreate">
							<el-option v-for="item in yesornos" :key="item.list" :label="item.listname"
								:value="item.list">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button size="small" @click="visible = false">取消</el-button>
			<el-button size="small" type="primary" @click="dataFormSubmitHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import {
		ref,
		reactive,
		onMounted,
		nextTick,
		computed
	} from 'vue';
	import {
		getlocationById,
		putlocation,
		postlocation
	} from "@/network/lswms/base/Location"
	import {
		ElMessage
	} from 'element-plus'
	import {
		getzonelist
	} from "@/network/lswms/base/Zone.js"
	import {
		getCodeListByCode
	} from "@/network/lswms/base/Codelist.js"
	import _ from 'lodash'


	export default {
		name: "locationAddOrUpdate",
		emits: ["refreshDataList"],
		setup(props, {
			emit
		}) {
			const visible = ref(false);
			const dataForm = ref({
				id: '',
				location: '',
				zonecode: '',
				locRow: '',
				locColumn: '',
				locLevel: '',
				locType: '',
				locCategory: '',
				locStatus: '',
				lane: '',
				laneSide: '',
				laneDepth: '',
				ismixedsku: '',
				ismixedtray: '',
				ismixedlot1: '',
				ismixedlot2: '',
				ismixedlot3: '',
				ismixedlot4: '',
				ismixedlot5: '',
				ismixedlot6: '',
				ismixedlot7: '',
				ismixedlot8: '',
				ismixedlot9: '',
				ismixedlot10: '',
				ismixedlot11: '',
				ismixedlot12: '',
				ismixedlot13: '',
				ismixedlot14: '',
				ismixedlot15: '',
				warehouse: '',
				length: '',
				width: '',
				height: '',
				weight: '',
				adduser: '',
				addtime: '',
				updatuser: '',
				updatetime: ''
			});


			const dataRule = reactive({
				location: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				zonecode: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				locRow: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				locColumn: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				locLevel: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				locType: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				locCategory: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				locStatus: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				lane: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				laneSide: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				laneDepth: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}]
			})

			const dataFormRef = ref(null)

			const zoneList = ref({});
			const getZoneListFn = () => {
				getzonelist().then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					zoneList.value = res.data;
				}).catch((err) => {});
			}


			const init = () => {
				visible.value = true;
				yesornoFn();
				nextTick(function() {
					dataFormRef.value.resetFields();
					locTypeFn();
					locStatusFn();
					locCategoryFn();
					getZoneListFn();
					IsmixedFn();
					if (dataForm.value.id) {
						getlocationInfo();

					}

				})
			}

			const getlocationInfo = () => {
				getlocationById(dataForm.value.id).then(function(res) {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					dataForm.value = _.assignIn({}, dataForm.value, res.data);
				}).catch((err) => {});
			}

			// 表单提交
			const dataFormSubmitHandle = _.debounce(() => {
				dataFormRef.value.validate(function(valid) {
					if (!valid) {
						return false;
					}

					let qing = () => {
						return !dataForm.value.id ? postlocation(dataForm.value) : putlocation(dataForm
							.value)
					}
					qing().then(function(res) {
						if (res.code !== 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								visible.value = false
								emit('refreshDataList')
							}
						})
					}).catch(function() {});

				})
			}, 1000, {
				'leading': true,
				'trailing': false
			})

			const yesornos = ref("");
			const yesornoFn = () => {
				getCodeListByCode('YESORNO').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					yesornos.value = res.data;
				}).catch((err) => {});
			}

			//获取库位类型
			const locTypeList = ref("");
			const locTypeFn = () => {
				getCodeListByCode('loc_type').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					locTypeList.value = res.data;
				}).catch((err) => {});
			}
			//获取库位状态
			const locStatusList = ref("");
			const locStatusFn = () => {
				getCodeListByCode('loc_status').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					locStatusList.value = res.data;
				}).catch((err) => {});
			}
			//获取库位类别
			const locCategoryList = ref("");
			const locCategoryFn = () => {
				getCodeListByCode('loc_category').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					locCategoryList.value = res.data;
				}).catch((err) => {});
			}
			//获取混放
			const IsmixedList = ref("");
			const IsmixedFn = () => {
				getCodeListByCode('Ismixed').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					IsmixedList.value = res.data;
				}).catch((err) => {});
			}


			return {
				visible,
				dataForm,
				dataRule,
				init,
				dataFormSubmitHandle,
				dataFormRef,
				zoneList,
				locTypeList,
				locStatusList,
				locCategoryList,
				IsmixedList,
				yesornos
			}
		},
		methods: {
			//hasPermission
			reString: function(val) {
				let n = Number(val)
				if (!isNaN(n)) {
					return n
				} else {
					return val
				}
			},

		}

	}
</script>

<style scoped>

</style>
